<template>
  <template v-for="subItem in menuList" :key="subItem.id">
    <template v-if="subItem.children && subItem.children?.length > 0">
      <el-sub-menu :index="subItem.id">
        <template #title>
          <el-icon>
            <jxtech-svg-icon
              v-if="subItem.attributes.image"
              :icon="subItem.attributes.image"
              :size="16"
              class="pointer"
            ></jxtech-svg-icon>
            <jxtech-svg-icon v-else icon="#icon-modular" :size="16" class="pointer"></jxtech-svg-icon>
          </el-icon>
          <span class="sle">{{ subItem.text }}</span>
        </template>
        <SubMenu :menu-list="subItem.children" />
      </el-sub-menu>
    </template>
    <template v-else>
      <el-menu-item :index="jumpUrl(subItem)" :disabled="isDisabled(subItem.attributes.url)" @click="handleClickMenu(subItem)">
        <el-icon>
          <jxtech-svg-icon v-if="subItem.attributes.image" :icon="subItem.attributes.image" :size="16" class="pointer">
          </jxtech-svg-icon>
          <jxtech-svg-icon v-else icon="#icon-modular" :size="16" class="pointer"></jxtech-svg-icon>
        </el-icon>
        <template #title>
          <span class="sle">{{ subItem.text }}</span>
        </template>
      </el-menu-item>
    </template>
  </template>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { JxtechMenu } from "@/stores/interface/auth";
import { jumpPath } from "@/utils/router-kit";

defineProps<{ menuList: JxtechMenu[] }>();

const router = useRouter();
const route = useRoute();

const jumpUrl = (menu: JxtechMenu) => {
  var regPos = /^[0-9]+.?[0-9]*/; //判断是否是数字。
  if (regPos.test(menu.attributes.vuePath)) return `${menu.attributes.url}/${menu.attributes.vuePath}`;
  else return `${menu.attributes.url}`;
};

const isDisabled = (url: string) => {
  return url === null || url === undefined || url === "";
};

const handleClickMenu = (subItem: JxtechMenu) => {
  // if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
  // router.push(subItem.path);
  if (subItem.attributes.url && subItem.children?.length === 0) {
    var regPos = /^[0-9]+.?[0-9]*/; //判断是否是数字。
    const path = regPos.test(subItem.attributes.vuePath)
      ? subItem.attributes.url + "/" + subItem.attributes.vuePath
      : subItem.attributes.url;
    jumpPath(path);
  }
};
</script>

<style lang="scss">
.el-sub-menu .el-sub-menu__title:hover {
  color: var(--el-menu-hover-text-color) !important;
  background-color: transparent !important;
}
.el-menu--collapse {
  .is-active {
    .el-sub-menu__title {
      color: #ffffff !important;
      background-color: var(--el-color-primary) !important;
    }
  }
}
.el-menu-item {
  &:hover {
    color: var(--el-menu-hover-text-color);
  }
  &.is-active {
    color: var(--el-menu-active-color) !important;
    background-color: var(--el-menu-active-bg-color) !important;
    &::before {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 4px;
      content: "";
      background-color: var(--el-color-primary);
    }
  }
}
.vertical,
.classic,
.transverse {
  .el-menu-item {
    &.is-active {
      &::before {
        left: 0;
      }
    }
  }
}
.columns {
  .el-menu-item {
    &.is-active {
      &::before {
        right: 0;
      }
    }
  }
}
</style>
